<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form label-position="left" label-width="20px" style="width:100%;">
        <el-form-item>
          <el-radio-group v-model="parkingNo">
            <el-radio-button label="0">南蓄</el-radio-button>
            <el-radio-button label="1">北蓄</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="沪">
          <div ref="inputWrapper">
            <el-input v-model="valueText" placeholder="车牌号" class="filter-item" readonly style="width: 250px;" @click.native="openKeyboard('inputWrapper')" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button v-waves :loading="confirmLoading" type="primary" icon="el-icon-check" @click="submit">确定</el-button>
        </el-form-item>
      </el-form>
      <Keyboard ref="keyboard" v-model="valueText" :visible.sync="visible" :input-element="inputElement" />
    </div>
  </div></template>

<script>
import { manualPost } from '@/api/shortdistance';
import waves from '@/directive/waves';
import Keyboard from '@/components/Keyboard/index.vue';

export default {
  name: 'Plate',
  components: { Keyboard },
  directives: { waves },
  data() {
    return {
      confirmLoading: false,
      visible: false,
      parkingNo: 0,
      valueText: '',
      inputElement: {}
    };
  },
  created() {
    const { params } = this.$route
    Object.keys(params).forEach(key => {
      this.type = params[key].split(':')[1];
    });
  },
  methods: {
    openKeyboard(target) {
      this.visible = true
      this.inputElement = this.$refs[target]
    },
    closeKeyboard() {
      this.visible = false
    },
    async submit() {
      this.visible = false
      await this.$confirm('确定车牌号是沪' + this.valueText + '吗？', '确定操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          this.confirmLoading = true;
          await manualPost({
            parkingNo: this.parkingNo,
            plateNumber: '沪' + this.valueText
          }).then(res => {
            this.confirmLoading = false;
            if (res.msg !== 'OK') {
              this.$message.error(res.msg);
              return;
            }
            this.$message.success('操作成功');
          });
        })
        .catch(() => {});
    }
  }
};
</script>
